@import 'styles/settings';
@import 'styles/typography-extends';

.cardContainer {
  padding: $sidebar-paddings;
  min-height: 387px;
}

.countriesLegend {
  padding: 5px $sidebar-cards-padding;
  display: flex;
  flex-flow: column wrap;
  height: 110px;
  color: white;
}
.continent,
.modalAdditionalContent {
  display: flex;
}

.continent {
  margin-bottom: $paragraph-gutter;
  width: 134px;
  margin-right: $sidebar-cards-padding;
}

.legendContinent {
  @extend %subtitle;
}

.legendDot {
  display: flex;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin-right: 12px;

  &.africa {
    background-color: $africa;
  }

  &.antarctica {
    background-color: $antarctica;
  }

  &.asia {
    background-color: $asia;
  }

  &.europe {
    background-color: $europe;
  }

  &.north-america {
    background-color: $north-america;
  }

  &.oceania {
    background-color: $oceania;
  }

  &.south-america {
    background-color: $south-america;
  }
}

.circlesLegend {
  display: flex;
  align-items: center;
  padding: 0px 25px 25px;
  justify-content: space-between;
  position: relative;
  margin-bottom: 40px;
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .value {
    @extend %subtitle;
    position: absolute;
    color: $white;
    bottom: 0px;
  }
  .unit {
    @extend %annotation;
    position: absolute;
    color: $white;
    bottom: -20px;
  }
}
